<template>
  <div class="pictureAlbumDiv">
    <iframe :src="src" width="99.8%" :height="windowHeight" class="html-iframe"></iframe>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      src: '/static/open/html5-3d-carousel/index.html',
      windowWidth: document.documentElement.clientWidth,  //实时屏幕宽度
      windowHeight: document.documentElement.clientHeight,   //实时屏幕高度
    }
  },
  watch: {
    windowHeight (val) {
      let that = this;
      console.log("实时屏幕高度：",val, that.windowHeight );
    },
    windowWidth (val) {
      let that = this;
      console.log("实时屏幕宽度：",val, that.windowHeight );
    }
  },
  mounted() {
    var that = this;
    // <!--把window.onresize事件挂在到mounted函数上-->
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        window.fullWidth = document.documentElement.clientWidth;
        that.windowHeight = window.fullHeight;  // 高
        that.windowWidth = window.fullWidth; // 宽
      })()
    };
  }
}
</script>

<style scoped>
  /*.pictureAlbumDiv{*/
  /*  margin: 0;*/
  /*  padding: 0;*/
  /*}*/
</style>
